<template>
	<view class="container">
		<view class="card card1">
			<view class="flex j-between a-center">
				<view class="flex a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(10).png"></image>
					</view>
					<view class="name">黄金会员</view>
				</view>
				<view class="flex buy j-center a-center" @tap="show = true">
					<view>开通会员</view>
				</view>
			</view>
			<view class="tip">开通会员后可享受以下权益</view>
			<view class="flex j-between a-center qy">
				<view class="item flex col j-center a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(1).png"></image>
					</view>
					<view class="t-name">日常任务</view>
					<view class="count">发布不限次数</view>
				</view>
				<view class="item flex col j-center a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(2).png"></image>
					</view>
					<view class="t-name">自由任务</view>
					<view class="count">每天可发布3条</view>
				</view>
				<view class="item flex col j-center a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(3).png"></image>
					</view>
					<view class="t-name">商家任务</view>
					<view class="count">每天可发布1条</view>
				</view>
				<view class="item flex col j-center a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(4).png"></image>
					</view>
					<view class="t-name">置顶推荐</view>
					<view class="count">1次免费置顶</view>
				</view>
			</view>
		</view>
		<view class="card card2">
			<view class="flex j-between a-center">
				<view class="flex a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(9).png"></image>
					</view>
					<view class="name">钻石会员</view>
				</view>
				<view class="flex buy j-center a-center" style="background-color: #283352;">
					<view>开通会员</view>
				</view>
			</view>
			<view class="tip">开通会员后可享受以下权益</view>
			<view class="flex j-between a-center qy">
				<view class="item flex col j-center a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(8).png"></image>
					</view>
					<view class="t-name">日常任务</view>
					<view class="count">发布不限次数</view>
				</view>
				<view class="item flex col j-center a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(7).png"></image>
					</view>
					<view class="t-name">自由任务</view>
					<view class="count">每天可发布7条</view>
				</view>
				<view class="item flex col j-center a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(5).png"></image>
					</view>
					<view class="t-name">商家任务</view>
					<view class="count">每天可发布3条</view>
				</view>
				<view class="item flex col j-center a-center">
					<view class="icon">
						<image class="image" src="../static/icon/vip/vip(6).png"></image>
					</view>
					<view class="t-name">置顶推荐</view>
					<view class="count">3次免费置顶</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" border-radius="16" mode="bottom">
			<view class="pop rela">
				<view class="close abso">
					<u-icon name="close-circle" size="36" color="#999"></u-icon>
				</view>
				<view class="flex j-center title">开通黄金会员</view>
				<view class="tip">当前未开通黄金会员</view>
				<view class="body">
					<view class="item flex j-between a-center rela" :class="{active:i == checked}" v-for="item,i in gold_list" :key="i" @tap="change(i)">
						<view class="time">{{item.time}}</view>
						<view class="flex a-end value">
							<view class="rmb">￥</view>
							<view>{{item.value}}</view>
						</view>
						<view class="abso rec flex j-center a-center" v-if="item.rec">
							<view>推荐</view>
						</view>
					</view>
				</view>
				<view class="apply flex j-center a-center">
					<view>立即支付</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default{
	data(){
		return{
			show:false,
			checked:0,
			gold_list:[{time:'7天',value:'18',rec:false},{time:'1个月',value:'40',rec:true},{time:'3个月',value:'98',rec:false},{time:'12个月',value:'188',rec:false}],
		}
	},
	methods:{
		change(i){
			this.checked = i
		},
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 32rpx 24rpx;}
.card{width: 702rpx;height: 448rpx;padding: 32rpx 24rpx;border-radius: 16rpx;margin-bottom: 32rpx;
	.icon{width: 80rpx;height: 80rpx;}
	.name{font-size: 36rpx;font-weight: bold;margin-left: 22rpx;}
	.buy{width: 192rpx;height: 64rpx;border-radius: 200rpx;background-color: #8D681C;color: #FFF;}
	.tip{font-size: 24rpx;margin-top: 66rpx;}
	.qy{margin-top: 32rpx;}
	.t-name{font-size-adjust: 24rpx;margin-top: 22rpx;}
	.count{font-size: 20rpx;margin-top: 8rpx;}
}
.card1{background: linear-gradient(225deg, #F7E9CB 0%, #DDB174 100%);color: #8D681C;}
.card2{background: linear-gradient(225deg, #BBC4DA 0%, #6F7A97 100%);color: #283352;}
.pop{padding: 36rpx 24rpx;min-height: 100rpx;
	.close{top:28rpx;right: 28rpx;z-index: 20;width: 36rpx;height: 36rpx;}
	.title{font-size: 36rpx;color: #333;font-weight: bold;}
	.tip{color: #999;font-size: 24rpx;text-align: center;margin-top: 24rpx;}
	.body{margin: 72rpx 0;color: #333;
		.item{height: 98rpx;border-radius: 16rpx;background: #F2F2F2;margin-top: 24rpx;
			padding: 0 24rpx;border: 2rpx solid #FFF;
			.time{font-size: 36rpx;}
			.value{font-size: 36rpx;font-weight: bold;}
			.rmb{font-size: 24rpx;}
			.rec{width: 96rpx;height: 32rpx;font-size: 20rpx;color: #FFF;background-color: #DDB175;
				border-radius: 16rpx 0 16rpx 0;top:0;left: 0;
			}
		}
		.active{color: #246FDD;border: 2rpx solid #246FDD;}
	}
	.apply{color: #FFF;font-size: 32rpx;background-color: #246FDD;border-radius: 16rpx;margin-top: 32rpx;height: 88rpx;}
}
</style>
